<template>
  <van-popup v-model:show="showPopup" closeable position="bottom" round teleport="body" @close="onClosePopup">
    <div class="popup-title">{{ title }}</div>
    <div :style="{ height: height || '80vh', overflow: 'auto', backgroundColor: '#F7F8FA', paddingTop: '2vh' }">
      <slot></slot>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
const props = defineProps<{
  show: boolean
  height?: string
  title?: string
}>()
let showPopup = ref(props.show)
const { height, title } = toRefs(props)

watch(
  () => props.show,
  (show) => (showPopup.value = show)
)

const emit = defineEmits<{ (e: 'update:show', show: boolean): void }>()

const onClosePopup = () => emit('update:show', false)
</script>

<style scoped>
.popup-title {
  height: 8vh;
  line-height: 8vh;
  width: 100%;
  text-align: center;
}
</style>
